<style lang="less">
@import './common/less/varible.less';

.layout-footer {
   width: 100%;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 1000;
}
.layout-footer-box {
   display: flex;
   align-items: center;
   width: 100%;
   height: 60px;
   background-color: #f0f0f0;
   a {
      flex-shrink: 0;
      flex-basis: 33.33333%;
      text-align: center;
      font-family: @fontfamily;
      p {
         font-size: 15px;
      }

      &.active {
         color: @activeColor;
      }
   }
}


//面试题： 哪些CSS属性具有继承性?  color  font-*  text-*   line-* 
//        不带继承性: width  height  display  backgroundColor  

</style>
<template>
     <div class="layout">
        <!-- 布局组件 -->
        <!-- 路由出口组件（二级路由） -->
        <router-view></router-view>

        <!-- 导航组件 -->
        <footer class="layout-footer">
          <div class="layout-footer-box">
              <router-link to="/index" active-class="active">
                <van-icon name="wap-home-o" />
                <p>主页</p>
              </router-link>
              <router-link to="/list" active-class="active">
               <van-icon name="list-switching" />
                <p>列表</p>
              </router-link>
              <router-link to="/my" active-class="active">
                <van-icon name="user-o" />
                <p>我的</p>
              </router-link>
          </div>
        </footer>
     </div>
</template>